import React from 'react'
import './css/login.css'
import {useSelector} from 'react-redux'
import {useDispatch} from 'react-redux'
import {setPassword, setPhone} from '../store/Login'
import {reqLogin} from '../api/api'
import {reqCaptcha} from '../api/api'
import {useNavigate} from 'react-router-dom'

export default function Login() {
    const navigate = useNavigate()
    const dispatch = useDispatch()

    const {phone, password} = useSelector(state => state.login)

    const PhoneOnChange = (e) => {
        dispatch(setPhone(e.target.value))
    }
    const PasswordOnChange = (e) => {
        dispatch(setPassword(e.target.value))
    }
    const GetPhone = async () => {
        await reqLogin(phone)
    }
    const Join = async () => {
        let result = await reqCaptcha(phone, password)
        if (result.data.code === 200) {
            navigate('/home')
        }
    }

    return (
        <div className='login'>
            <div className="form-wrapper">
                <div className="header">
                    断剑重铸之日<br/>骑士归来之时
                </div>
                <div className="input-wrapper">
                    <div className="border-wrapper">
                        <input type="text" defaultValue={phone} placeholder="username" onChange={PhoneOnChange}
                               className="border-item"
                               autoComplete="off"/>
                    </div>
                    <div className="border-wrapper">
                        <input type="text" defaultValue={password} placeholder="password" onChange={PasswordOnChange}
                               className="border-item" autoComplete="off"/>
                    </div>
                </div>
                <div className="action">
                    <div className="btn" onClick={GetPhone}>GET CODE</div>
                </div>
                <div className="action">
                    <div className="btn" onClick={Join}>Join</div>
                </div>
                <div className="icon-wrapper">
                    <i className="iconfont icon-weixin"></i>
                    <i className="iconfont icon-qq"></i>
                </div>
            </div>
        </div>
    )
}
